import { Button } from 'ant-design-vue'
import { omit } from 'lodash-es'
import { defineComponent, ref } from 'vue'

import { marketingApi } from '@/apis'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import { download } from '@/utils'

export default defineComponent({
  name: 'SignInRecord',
  setup() {
    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref({
      fixedHeight: true,
      options: {
        border: true,
        toolbarConfig: {
          slots: {
            buttons: 'toolbarButtons'
          }
        },
        formConfig: {
          items: [
            {
              title: '上次签到时间',
              field: 'lastDate',
              itemRender: {
                name: TABLE_RENDERER.FormItemDate,
                props: {
                  type: 'range',
                  placeholder: ['开始时间', '结束时间'],
                  valueFormat: 'YYYY-MM-DD',
                  keys: ['lastSignStartDate', 'lastSignEndDate']
                }
              }
            },
            {
              title: '首次签到时间',
              field: 'firstDate',
              itemRender: {
                name: TABLE_RENDERER.FormItemDate,
                props: {
                  type: 'range',
                  placeholder: ['开始时间', '结束时间'],
                  valueFormat: 'YYYY-MM-DD',
                  keys: ['firstSignStartDate', 'firstSignEndDate']
                }
              }
            },
            {
              title: '手机号',
              field: 'mobile',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入手机号'
                }
              }
            },
            {
              title: '累计签到天数',
              itemRender: {
                name: TABLE_RENDERER.FormItemNumberRange,
                props: {
                  keys: ['totalDaysStart', 'totalDaysEnd'],
                  addonAfter: '天'
                }
              }
            },
            {
              title: '连续签到天数',
              itemRender: {
                name: TABLE_RENDERER.FormItemNumberRange,
                props: {
                  keys: ['continueDaysStart', 'continueDaysEnd'],
                  addonAfter: '天'
                }
              }
            },
            {
              itemRender: {
                name: TABLE_RENDERER.FormItemBtns
              }
            }
          ]
        },
        columns: [
          {
            title: '用户',
            field: 'nickName'
          },
          {
            title: '手机号',
            field: 'mobile'
          },
          {
            title: '首次签到时间',
            field: 'firstSignTime',
            formatter: [TABLE_FORMAT.Date, 'yyyy-MM-dd HH:mm:ss']
          },
          {
            title: '上次签到时间',
            field: 'lastSignTime',
            formatter: [TABLE_FORMAT.Date, 'yyyy-MM-dd HH:mm:ss']
          },
          {
            title: '累计签到天数',
            field: 'continueDay'
          },
          {
            title: '最长连续签到天数',
            field: 'longestContinueDay'
          },
          {
            title: '奖励总积分',
            field: 'totalSignReward'
          },
          {
            title: '奖励优惠券数量',
            field: 'totalCouponNum'
          }
        ],
        pagerConfig: {
          pageSize: 15
        },
        proxyConfig: {
          seq: true,
          form: true,
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page, form }) => {
              form = omit(form, ['firstDate', 'lastDate'])

              const data = await marketingApi.getSignInRecordList({
                pageParameter: {
                  pageSize: page.pageSize,
                  currentPage: page.currentPage
                },
                ...form
              })
              return data
            }
          }
        }
      }
    } as ProTableProps)

    async function handleExport() {
      const { form } = tableRef.value.table.getProxyInfo()!

      try {
        tableRef.value.showLoading()
        const res = await marketingApi.exportSignInRecordList(form)
        download(res, '签到记录列表')
      } finally {
        tableRef.value.hideLoading()
      }
    }

    return {
      tableRef,
      tableConfig,
      handleExport
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            toolbarButtons: () => (
              <Button onClick={this.handleExport}>导出列表</Button>
            )
          }}
          {...this.tableConfig}
        />
      </div>
    )
  }
})
